<template>
  <div class="back-order-detail">
    <el-card shadow="never">
      <div class="title">
        订单信息:
        <el-tag
          v-if="orderInfo.status == 0"
          size="small"
          type="danger"
          effect="dark"
        >待处理</el-tag>
        <el-tag
          v-else-if="orderInfo.status == 1"
          size="small"
          type="warning"
          effect="dark"
        >退货中</el-tag>
        <el-tag
          v-else-if="orderInfo.status == 2"
          size="small"
          effect="dark"
        >已完成</el-tag>
        <el-tag
          v-else-if="orderInfo.status == 3"
          size="small"
          effect="dark"
          type="info"
        >已拒绝</el-tag>

        <el-tag v-else size="mini" type="info">无效订单</el-tag>

      </div>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0" class="item">
          <span class="label"> 订单编号: </span>
          <span class="value"> {{ orderInfo.orderSn }}&nbsp;&nbsp; </span>
          <el-button
            type="text"
            size="default"
            @click="handlegoOrderDetail"
          >查看订单详情</el-button>
        </el-col>
        <el-col :span="6" :offset="0" class="item">
          <span class="label"> 退单人姓名: </span>
          <span class="value">
            {{ orderInfo.returnName }}
          </span>
        </el-col>
        <el-col :span="6" :offset="0" class="item">
          <span class="label"> 退单理由: </span>
          <span class="value">
            {{ orderInfo.reason }}
          </span>
        </el-col>
        <el-col :span="6" :offset="0" class="item">
          <span class="label"> 退单描述: </span>
          <span class="value">
            {{ orderInfo.description }}
          </span>
        </el-col>
        <el-col :span="6" :offset="0" class="item">
          <span class="label"> 申请时间: </span>
          <span class="value">
            {{ orderInfo.createTime }}
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0" class="pics-row">
          <span class="label"> 退单图片: </span>
          <span class="value">
            <img
              v-for="item in pics"
              :key="item"
              :src="item"
              alt=""
              srcset=""
              class="pic"
            >
          </span>
        </el-col>
      </el-row>
      <el-divider direction="horizontal" />

      <div>
        <div class="title">退货商品:</div>
        <el-table :data="[orderInfo]" border stripe>
          <el-table-column label="商品图片" :width="200" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.productPic" alt="" srcset="" class="pic">
            </template>
          </el-table-column>
          <el-table-column label="商品描述" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.productName }}</p>
              <p>品牌: {{ scope.row.productBrand }}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="商品价格"
            prop="productPrice"
            align="center"
          />
          <el-table-column label="商品属性" align="center">
            <template slot-scope="scope">
              {{ scope.row.productAttr | productAttrLabel }}
            </template>
          </el-table-column>
          <el-table-column
            label="商品数量"
            prop="productCount"
            align="center"
          />
          <el-table-column
            label="总计"
            prop="productRealPrice"
            align="center"
          />
        </el-table>
      </div>
      <el-divider direction="horizontal" />

      <div class="userInfo">
        <div class="title">用户信息:</div>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 联系人: </span>
            <span class="value">
              {{ orderInfo.returnPhone }}
            </span>
          </el-col>
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 联系电话: </span>
            <span class="value">
              {{ orderInfo.returnPhone }}
            </span>
          </el-col>
        </el-row>
      </div>
      <el-divider direction="horizontal" />

      <div class="costInfo">
        <div class="title">费用信息:</div>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 退款金额: </span>
            <span class="value">
              {{ orderInfo.returnAmount }}
            </span>
          </el-col>
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 运费金额 : </span>
            <span class="value">
              {{ 0 }}
            </span>
          </el-col>
        </el-row>

        <div v-if="orderInfo.status == 0">
          <el-form
            ref="handleForm"
            :model="handleForm"
            :rules="handleFormRules"
            label-width="80px"
            :inline="false"
            label-position="left"
            size="mini"
          >
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="退款金额">
                  <el-input-number
                    v-model="handleForm.returnAmount"
                    :min="0"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="处理人">
                  <el-input
                    v-model="handleForm.handleMan"
                    placeholder="处理人"
                    size="mini"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="处理备注">
                  <el-input
                    v-model="handleForm.handleNote"
                    placeholder="处理备注"
                    size="mini"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div v-if="orderInfo.status > 0" class="handleRes">
        <el-divider direction="horizontal" />
        <div class="title">处理结果:</div>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 处理人: </span>
            <span class="value">
              {{ orderInfo.handleMan }}
            </span>
          </el-col>
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 处理备注 : </span>
            <span class="value">
              {{ orderInfo.handleNote }}
            </span>
          </el-col>
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 处理时间 : </span>
            <span class="value">
              {{ orderInfo.handleTime }}
            </span>
          </el-col>
        </el-row>
        <div v-if="orderInfo.status == 1" class="consignee">
          <el-form
            ref="consigneeForm"
            :model="consigneeForm"
            :rules="consigneeFormRules"
            label-width="80px"
            :inline="false"
            size="mini"
            label-position="left"
          >
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="收货人">
                  <el-input v-model="consigneeForm.receiveMan" />
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="收货备注">
                  <el-input v-model="consigneeForm.receiveNote" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div v-if="orderInfo.status == 2" class="receive">
        <el-divider direction="horizontal" />

        <div class="title">收货信息:</div>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 退单收货人: </span>
            <span class="value">
              {{ orderInfo.receiveMan }}
            </span>
          </el-col>
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 退单收货备注 : </span>
            <span class="value">
              {{ orderInfo.receiveNote }}
            </span>
          </el-col>
          <el-col :span="6" :offset="0" class="item">
            <span class="label"> 退单收货时间 : </span>
            <span class="value">
              {{ orderInfo.receiveTime }}
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="btns">
        <el-button
          v-if="orderInfo.status == 0"
          type="primary"
          size="default"
          @click="handleAgreeApply"
        >同意退款</el-button>
        <el-button
          v-if="orderInfo.status == 0"
          size="default"
          @click="handleRejectApply"
        >拒绝退款</el-button>
        <el-button
          v-if="orderInfo.status == 1"
          type="primary"
          size="default"
          @click="handleReceiveProduct"
        >确认收货</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  orderReturn,
  agreeApply,
  rejectApply,
  receiveProduct
} from '@/api/order/back/index'
export default {
  filters: {
    productAttrLabel(val) {
      const attr = JSON.parse(val)
      return attr.reduce((str, current) => {
        return `${str}  ${current.key}:${current.value}`
      }, '')
    }
  },
  data() {
    return {
      orderId: '',
      orderInfo: {},
      handleForm: {}, // 处理人form
      consigneeForm: {} // 收货人form
    }
  },
  computed: {
    pics() {
      return this.orderInfo.proofPics.split(',')
    }
  },
  created() {
    this.orderId = this.$route.query.id
    this.getOrderInfo()
  },
  methods: {
    // 获取退单信息
    async getOrderInfo() {
      const { success, data, message } = await orderReturn(this.orderId)
      if (success) {
        this.orderInfo = data.orderReturnApply
      } else {
        this.$message.error(message)
      }
    },
    // 同意退款
    async handleAgreeApply() {
      const { success, message } = await agreeApply(this.orderId, {
        ...this.handleForm,
        id: this.orderId
      })
      if (success) {
        this.$message.success('已处理')
        window.location.reload()
      } else {
        this.$message.error(message)
      }
    },
    // 拒绝退款
    async handleRejectApply() {
      const { success, message } = await rejectApply(this.orderId, {
        ...this.handleForm,
        id: this.orderId
      })
      if (success) {
        this.$message.success('已拒绝')
        window.location.reload()
      } else {
        this.$message.error(message)
      }
    },
    // 确定收货
    async handleReceiveProduct() {
      const { success, message } = await receiveProduct(this.orderId, {
        ...this.consigneeForm,
        id: this.orderId
      })
      if (success) {
        this.$message.success('已确认')
        window.location.reload()
      } else {
        this.$message.error(message)
      }
    },
    handlegoOrderDetail() {
      this.$router.push(`/order/detail?id=${this.orderInfo.orderId}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.back-order-detail {
  margin: 30px;
  .title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 30px;
  }
  .item {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
  .pics-row {
    margin-top: 20px;
    font-size: 14px;
  }
  .pic {
    width: 100px;
    height: 100px;
    vertical-align: top;
    margin-left: 20px;
  }
  .consignee {
    margin-top: 30px;
  }
  .btns {
    display: flex;
    justify-content: center;
  }
}
</style>
